<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <script src="js/jquery.min.js"></script>
    
    <style>
        * {
            padding: 0;
            margin: 0;
            outline: none;
        }
 
        body {
            background: linear-gradient(45deg, #fbda61, #ff5acd);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
 
        .shell,
        .login-box {
            position: relative;
        }
 
        .shell {
            display: flex;
            justify-content: center;
        }
 
        .login-box {
            width: 562px;
            height: 520px;
            background-color: #fff;
            box-shadow: 0px 15px 40px #b6354e;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #img-box {
            width: 330px;
            height: 520px;
        }
 
        #img-box img {
            height: 100%;
			margin-left: -175px;
			border-radius: 20px;
        }
 
        #form-body {
            width: 320px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
 
        #welcome-lines {
            width: 100%;
            text-align: center;
            line-height: 1;
        }
 
        #w-line-1 {
            color: #7f7f7f;
            font-size: 40px;
        }
 
        #w-line-2 {
            color: #9c9c9c;
            font-size: 25px;
            margin-top: 17px;
        }
 
        #input-area {
            width: 100%;
            margin-top: 40px;
        }
 
        .f-inp {
            padding: 13px 25px;
            border: 2px solid #6e6d6d;
            line-height: 1;
            border-radius: 20px;
            margin-bottom: 15px;
        }
 
        .f-inp input {
            width: 100%;
            font-size: 14px;
            padding: 0;
            margin: 0;
            border: 0;
        }
 
        .f-inp input::placeholder {
            color: #b9b9b9;
        }
 
        #submit-button-cvr {
            margin-top: 10px;
        }
 
        #submit-code {
            display: block;
            width: 320px;
            color: #fff;
            font-size: 14px;
            margin: 0;
            padding: 14px 40px;
            border: 0;
            background-color: #f5506e;
            border-radius: 25px;
            line-height: 1;
            cursor: pointer;
        }

        #submit {
            display: block;
            width: 320px;
            color: #fff;
            font-size: 14px;
            margin: 0;
            padding: 14px 40px;
            border: 0;
            background-color: #f5506e;
            border-radius: 25px;
            line-height: 1;
            cursor: pointer;
        }
 
        #forgot-pass {
            text-align: center;
            margin-top: 10px;
        }
 
        #forgot-pass a {
            color: #868686;
            font-size: 12px;
            text-decoration: none;
        }
        

        #blog-home {
    position: absolute;
    top: 35px;
    right: 30px; /* 修改为右侧对齐 */
}

#blog-home a{
    color: #000; /* 修改文字颜色为黑色 */
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

#login{
    position: absolute;
    top: 30px;
    left: 30px; /* 修改为左侧对齐 */
}

#login a{
    color: #000; /* 修改文字颜色为黑色 */
    text-decoration: none;
    font-size: 16px;
}

#top-right {
    position: absolute;
    top: 10px;
    right: 10px;
}

#top-right a {
    display: inline-block; /* 设置为块级元素 */
    margin-left: 10px; /* 左右间距 */
    padding: 8px 12px; /* 内边距 */
    color: #000; /* 文字颜色 */
    font-size: 16px; /* 字体大小 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 4px; /* 圆角 */
    background-color: #ddd; /* 背景颜色 */
}

#top-right a:hover {
    color: #fff; /* 鼠标悬停时文字颜色 */
    background-color: #333; /* 鼠标悬停时背景颜色 */
}

    </style>
</head>
 
<body>

    <div id="top-right">
        <a href="blog_list.html" class="btn">博客主页</a>
        <a href="login3.html" class="btn">登陆</a>
        <a href="reg2.html" class="btn">注册</a>
    </div>
    
    

    <div class="shell">
        <!-- <div id="img-box">
            <img src="img/logo6.png" alt="">
        </div> -->
        <div class="login-box">
            <div id="form-body">
                <div id="welcome-lines">
                    <!-- <div id="w-line-1">Hi,糊涂蛋</div> -->
                    <div id="w-line-2">Retrieve Password</div>
                </div>
                <div id="input-area">

                    <div class="f-inp">
                        <input type="text" placeholder="User Name" id="username">
                    </div>

                    <div class="f-inp">
                        <input type="password" placeholder="New Password" id="password">
                    </div>

                    <div class="f-inp">
                        <input type="password" placeholder="Duplicate Password" id="password2">
                    </div>

                    <div class="f-inp">
                        <input type="text" placeholder="Email" id="email">
                    </div>

                    <div class="f-inp">
                        <input style="width: 80px;" placeholder="Email Code" id="code_input">
                        
                    </div>
                    
                </div>
                <div id="submit-button-cvr">
                    <button type="submit" id="submit-code" onclick="myemai()">SEND / 立即发送</button>
                </div>

                <div id="submit-button-cvr">
                    <button type="submit" id="submit" onclick="mysub()">CONFIRM / 提交</button>
                </div>
                
            </div>
        </div>
    </div>

    <script>
        // 获取标签
        var username = jQuery("#username");
        var email = jQuery("#email");
        var password = jQuery("#password");
        var password2 = jQuery("#password2");
        var code_input = jQuery("#code_input");

        // 邮箱正则表达式
        var a = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        function myemai() {
            
            // 1. 非空效验
            if(username.val().trim() == "") {
                alert("请输入用户名");
                username.focus();
                return false;
            }

            if(password.val().trim() == "") {
                alert("请输入新密码!");
                password.focus();
                return false;
            }

            if(password.val().length < 6 || password.val().length > 8) {
                alert("请输入 6-8 位数密码");
                password.focus();
                return false;
            }

            if(password2.val().trim() == "") {
                alert("请输入重复密码!");
                password2.focus();
                return false;
            }

            if(password.val() != password2.val()) {
                alert("请检查两次密码是否一致!");
                password.focus();
                return false;
            }

            if(email.val().trim() == "") {
                alert("请输入邮箱!");
                email.focus();
                return false;
            }

            var registerBtn = $('#submit-code');
            var countDown = 60; // 倒计时 60 秒
            var timer; // 定时器变量

            // 到此处, 邮箱一定不为空
            if(a.test(email.val())) {
                // 此时邮箱一定有效

                // 发送验证码请求
                jQuery.ajax({
                    url:'/user/email',
                    type:'post',
                    data:{
                        'email':email.val().trim(),
                        'username': username.val().trim()
                    },
                    success:function(res) {
                        if(res.code == 200 && res.data == 1) {
                            alert("邮箱发送成功, 请注意查收!");
                            if (countDown != 60) {
                                    return; // 如果还在倒计时中，则不响应点击事件
                                }
                                registerBtn.attr('disabled', true); // 禁用注册按钮
                                timer = setInterval(function() {
                                    countDown--;
                                    if (countDown == 0) {
                                        clearInterval(timer);
                                        registerBtn.text('立即注册');
                                        registerBtn.attr('disabled', false);
                                        countDown = 60;
                                    } else {
                                        registerBtn.text('剩余 ' + countDown + ' 秒');
                                    }
                                }, 1000);
                        } else {
                            alert("邮箱发送失败 : " + res.msg);
                            jQuery("#submit-code").removeAttr("disabled");
                            return false;
                        }
                    }
                });

            } else {
                alert("请输入有效邮箱!");
                email.focus();
                return false;
            }
        }
        
        function mysub() {

            // 1. 非空效验
            if(username.val().trim() == "") {
                alert("请输入用户名");
                username.focus();
                return false;
            }

            if(password.val().trim() == "") {
                alert("请输入新密码!");
                password.focus();
                return false;
            }

            if(password.val().length < 6 || password.val().length > 8) {
                alert("请输入 6-8 位数密码");
                password.focus();
                return false;
            }

            if(password2.val().trim() == "") {
                alert("请输入重复密码!");
                password2.focus();
                return false;
            }

            if(password.val() != password2.val()) {
                alert("请检查两次密码是否一致!");
                password.focus();
                return false;
            }


            if(email.val().trim() == "") {
                alert("请输入邮箱!");
                email.focus();
                return false;
            }

            if(code_input.val().trim() == "") {
                alert("请输入验证码!");
                code_input.focus();
                return false;
            }

            if(code_input.val().length > 6) {
                alert("请输入正确验证码");
                code_input.focus();
                return false;
            }

            // 3. 冻结提交按钮防止用户多次提交
            jQuery("#submit").attr("disabled", "disabled"); // 属性设置采用键值的形式

            jQuery.ajax({
                url:"/user/forgot",
                type:'post',
                data:{
                    'username':username.val().trim(),
                    'email':email.val().trim(),
                    'password':password.val().trim(),
                    'code_input':code_input.val().trim()
                },
                success:function(res) {
                    if(res.code == 200 && res.data == 1) {
                        alert("密码重置成功!");
                        location.href = "login3.html";
                    }else {
                        jQuery("#submit").removeAttr("disabled");
                        alert("重置失败 : " + res.msg);
                    }
                }
            });

        }

        


    </script>

</body>
 
</html>